<template>
  <f7-page>
    <div
      style="
        width: 100%;
        padding: calc(20px * var(--ratio)) calc(32px * var(--ratio));
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #000;
      "
    >
      <div class="left">
        <f7-link back
          ><f7-icon f7="chevron_left" style="color: #000"></f7-icon
        ></f7-link>
      </div>
      <div class="title">搜索</div>
      <div class="right">
        <f7-link><f7-icon f7="ellipsis" style="color: #000"></f7-icon></f7-link>
      </div>
    </div>

    <qm-search
      placeholder="搜索词"
      v-model="searchKey"
      @search="onSearch"
      shape="round"
      left-icon=""
      clear-trigger="always"
      show-action>
      <template #action>
        <div @click="onSearch" style="width: 3em; text-align: center">搜索</div>
      </template>
    </qm-search>
    <div v-show="isshow">
      <ul>
        <li class="qm-li" v-for="(item, index) in selectCitys" :key="index" @click="content(item)">
          <f7-icon slot="media" f7="search" ></f7-icon>
          <div v-html="highlight(item)">
          </div>
        </li>
      </ul>
    </div>
    <div>尝试搜索你</div>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      searchKey: "",
      isshow:true,
      citys:['广西','桂林','你真的','他真的','我哭死','你','你拥有吗','你没有','你说你是','我免费拉！！'],
      selectCitys:[],
    };
  },
  watch:{
    searchKey:function(val,oldval){
      if(val.length==0){
        this.isshow=false
      }else{
        this.isshow = true;
        let city = []
        this.citys.forEach((item,index) => {
           if(item.indexOf(val)>=0){
              city.unshift(item)
              }
        });
         this.selectCitys = city;
      }
    }
  },
  methods: {
    onSearch() {
      if (this.searchKey) {
        this.historySearch.splice(0, 0, this.searchKey);
        this.$f7.toast.show({
          text: `搜索词：${this.searchKey}`,
          closeTimeout: 3000,
          icon: "<i class='f7-icons'>search</i>",
        });
      }
    },
    highlight(source){
      const reg = new RegExp(this.searchKey,'gi')
      return source.replace(reg,`<span style="color: #3385FF">${this.searchKey}</span>`)
    },
    content(content){
      this.searchKey=content
      this.selectCitys=[]
    }
  },
};
</script>

<style lang="less" scoped>
.title {
  height: 2em;
  vertical-align: middle;
  margin-top: calc((50px - 12px) * var(--ratio));
  margin-bottom: calc((50px - 40px) * var(--ratio));
  font-size: var(--font-size-maintitle);
  color: var(--color-text-title);
  font-weight: 500;
  .icon {
    float: right;
  }
}

.after-title {
  .icon {
    font-size: calc(44px * var(--ratio));
    color: #9fa7b8;
  }
}
.tag-box {
  margin-top: calc(-40px * var(--ratio));
  margin-bottom: 0;
}
.tag {
  padding: calc(10px * var(--ratio)) calc(20px * var(--ratio));
  height: calc(60px * var(--ratio));
  text-align: center;
  margin: calc(40px * var(--ratio)) calc(24px * var(--ratio)) 0 0;
  text-overflow: ellipsis;
  overflow: hidden;
}
.qm-li {
  padding: 10px 12px;
  display: flex;
  .f7-icons {
    font-size: 15px;
    color: #9ea7b4;
    margin-right: calc(24px * var(--ratio));
    line-height: 20px;
  }
}
</style>
